<template>
  <el-dialog title="报销申请" :close-on-click-modal="false" v-model="visible" width="550px">
    <el-scrollbar height="470px">
      <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="100px">
        <el-form-item label="报销种类" prop="type">
          <el-radio-group v-model="dataForm.type" size="medium">
            <el-radio-button label="普通报销"></el-radio-button>
            <el-radio-button label="差旅报销"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="借款金额" prop="anleihen">
          <el-input
              v-model="dataForm.anleihen"
              placeholder="借款金额"
              size="medium"
              style="width:160px;"
              clearable="clearable"
              prop="anleihen"
          />
          <span class="note">请如实填写借款金额</span>
        </el-form-item>
        <div v-for="(one, $index) in dataForm.project" class="project">
          <h3>【 报销项目 】</h3>
          <i class="el-icon-delete icon-delete" @click="deleteProjectHandle($index)"></i>
          <el-form-item
              label="项目名称"
              :prop="'project.' + $index + '.title'"
              :rules="{
							required: true,
							message: '项目名称必填'
						}"
          >
            <el-input
                v-model="one.title"
                size="medium"
                style="width:95%"
                maxlength="20"
                clearable
            />
          </el-form-item>
          <el-form-item
              label="项目类别"
              :prop="'project.' + $index + '.type'"
              :rules="{
							required: true,
							message: '项目类别必填'
						}"
          >
            <el-select v-model="one.type" class="input" size="medium" clearable>
              <el-option label="办公用品" value="办公用品"/>
              <el-option label="招待费" value="招待费"/>
              <el-option label="采购费" value="采购费"/>
              <el-option label="劳务费" value="劳务费"/>
              <el-option label="培训费" value="培训费"/>
              <el-option label="维修费" value="维修费"/>
              <el-option label="办公费" value="办公费"/>
              <el-option label="其他" value="其他"/>
            </el-select>
            <span class="note">请选择项目报销的类别</span>
          </el-form-item>
          <el-form-item label="备注信息" prop="projectDesc">
            <el-input
                v-model="one.desc"
                type="textarea"
                size="medium"
                maxlength="50"
                style="width:95%"
                resize="none"
                show-word-limit
                clearable
            />
          </el-form-item>
          <el-form-item
              label="报销金额"
              :prop="'project.' + $index + '.money'"
              :rules="{
							required: true,
							pattern:
								'(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)',
							message: '报销金额必填'
						}"
          >
            <el-input
                v-model="one.money"
                size="medium"
                style="width:160px;"
                clearable
            />
            <span class="note">认真核对该项目的报销金额</span>
          </el-form-item>
        </div>
      </el-form>
    </el-scrollbar>
    <template #footer>
			<span class="dialog-footer">
				<el-button type="danger" size="medium" @click="addHandle">添加项目</el-button>
				<el-button size="medium" @click="visible = false">取消</el-button>
				<el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>
			</span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data: function () {
    return {
      visible: false,
      dataForm: {
        type: '普通报销',
        anleihen: null,
        project: []
      },
      dataRule: {
        anleihen: [
          {
            required: true,
            pattern:
                '(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)',
            message: '金额格式错误'
          }
        ]
      }
    };
  },
  methods: {
    init: function () {
      let that = this;
      that.visible = true;
      that.$nextTick(() => {
        that.$refs['dataForm'].resetFields();
        that.dataForm.type = '普通报销';
        that.dataForm.anleihen = null;
        that.dataForm.project = [{title: null, type: null, desc: null, money: null}];
      });
    },
    addHandle: function () {
      let that = this;
      if (that.dataForm.project.length == 5) {
        that.$message({
          message: '这笔报销不能超过5个报销项目',
          type: 'warning',
          duration: 1200
        });
        return;
      }
      that.dataForm.project.push({title: null, type: null, desc: null, money: null,});
      that.$message({
        message: '添加成功',
        type: 'success',
        duration: 1200
      });
    },
    deleteProjectHandle: function (index) {
      let that = this;
      if (that.dataForm.project.length == 1) {
        that.$message({
          message: '不能删除仅存的报销项目',
          type: 'warning',
          duration: 1200
        });
      } else {
        that.dataForm.project.splice(index, 1);
        that.$message({
          message: '删除成功',
          type: 'success',
          duration: 1200
        });
      }
    },
    dataFormSubmit: function () {
      let that = this;
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          let amount = 0;
          for (let one of that.dataForm.project) {
            amount += Number(one.money);
          }
          let data = {
            typeId: that.dataForm.type == '普通报销' ? 1 : 2,
            amount: amount,
            anleihen: that.dataForm.anleihen,
            balance: amount - Number(that.dataForm.anleihen),
            content: JSON.stringify(that.dataForm.project)
          };
          that.$http(`reim/insert`, 'POST', data, true, function (resp) {
            if (resp.rows == 1) {
              that.$message({
                message: '操作成功',
                type: 'success',
                duration: 1200
              });
              that.visible = false;
              that.$emit('refreshDataList');
            } else {
              that.$message({
                message: '操作失败',
                type: 'error',
                duration: 1200
              });
            }
          });
        }
      });
    },

  }
};
</script>

<style lang="less" scoped="scoped">
.note {
  color: #999;
  margin-left: 15px;
}

.project {
  border-top: dashed 1px #e0e0e0;
  position: relative;
}

h3 {
  text-align: center;
  margin: 20px 0;
}

.icon-delete {
  position: absolute;
  right: 20px;
  top: 20px;
  height: 24px;
  width: 24px;
  cursor: pointer;
}
</style>
